import './App.css'
import PictureCard from './components/PictureCard/PictureCard.jsx'
import { useState } from 'react'
import { getAudio } from './lib/audio.ts'

export default function App() {
  const userPrompt = `
    分析图片内容，找出最能代表这张图片的一个词，尽量选择更简单的词。
    返回JSON数据，我希望的JSON数据格式是这样的：
    {
      "image_description": "这是图片的描述",
      "representative_word": "最能描述图片的单词",
      "example_sentence": "这是一个例句，用来展示这个单词的意思",
      "explanation":"结合图片解析英文单词，段落以 Look at ... 开头，每句单独一行，解析的最后一个日常有关的问句。",
      "example_replys":[
        "根据explanation给出的回复 1",
        "根据explanation给出的回复 2",
        "根据explanation给出的回复 3"
      ]
}
`
  // const [audio, setAudio] = useState('')
  const [description, setDescription] = useState('')
  const [imgPreview, setImgPreview] = useState(undefined as string | undefined)
  const [isExpand, setIsExpand] = useState(false)
  const [word, setWord] = useState('请上传图片')
  const [explanation, setExplanation] = useState('')
  const [example_replys, setExampleReplys] = useState([])

  const [audio, setAudio] = useState('')
  const submit = async (data: string) => {
    // console.log(data);
    setImgPreview(data)
    // 图片分析
    const endpoint = 'https://api.moonshot.cn/v1/chat/completions'
    const headers = {
      'Authorization': `Bearer ${import.meta.env.VITE_KIMI_API_KEY}`,
      'Content-Type': 'application/json'
    }
    setWord('分析中...')

    const response = await fetch(endpoint, {
      method: 'POST',
      headers,
      body: JSON.stringify({
        model: "moonshot-v1-8k-vision-preview",
        messages: [
          {
            role: 'user',
            content: [
              {
                type: 'image_url',
                image_url: {
                  url: data
                }
              },
              {
                type: 'text',
                text: userPrompt
              }
            ]
          }
        ]
      })
    })
    const res = await response.json()
    // console.log(res.choices[0].message.content);
    const reply = JSON.parse(res.choices[0].message.content)
    console.log(reply);
    setDescription(reply.image_description)
    setExplanation(reply.explanation)
    setExampleReplys(reply.example_replys)
    setWord(reply.representative_word)
    const audioUrl = await getAudio(reply.representative_word + reply.image_description)
    setAudio(audioUrl)
  }

  return (
    <div className='container'>
      <PictureCard word={word} submit={submit} audio={audio} />
      <div className='output'>
        <div>{description}</div>
        <div className="detail">
          <button onClick={() => setIsExpand(!isExpand)}>Talk about it</button>
          {isExpand ?
            <div className="expand">
              <img src={imgPreview} alt="" />
              <div className='explaination'>
                <p>{explanation}</p>
              </div>
              <div className='reply'>
                <div>{example_replys.map((item, index) => <div key={index} className='reply-item'>{item}</div>)}</div>
              </div>
            </div> :
            <div className="fold"></div>}
        </div>
      </div>
      {/* <audio ref={audioRef}></audio> */}
    </div>
  )
}
